<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/rp.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.plusReady(function() {
				document.getElementById("topay").addEventListener("tap",function(){
					var recName = document.getElementById("recName");
					var recPostcode = document.getElementById("recPostcode");
					var needPay = document.getElementById("needPay");
					var safecode = document.getElementById("safecode");
					
					if(recName.value==undefined||recName.value==""){
						plus.nativeUI.alert("请填写收件人姓名",function(){
							recName.focus();
						});
					}else if(recPostcode.value==undefined||recPostcode.value==""){
						plus.nativeUI.alert("请填写邮编",function(){
							recPostcode.focus();
						});						
					}else if(needPay.value==undefined||needPay.value==""){
						plus.nativeUI.alert("请选择地区",function(){
							needPay.focus();
						});						
					}else if(safecode.value==undefined||safecode.value==""){
						plus.nativeUI.alert("请填写安全码",function(){
							safecode.focus();
						});						
					}else{
						//取得认证信息
						var authData = ref.getAuth();
						if (authData) {
							console.log("User " + authData.uid + " is logged in with " + authData.provider);
							var cardsRef = ref.child("cards");
							/*
							cardsRef.orderByChild("cid").equalTo(cid).on("value", function(snapshot) {
								console.log('key is: '+snapshot.key());
								console.log('val is：');
								console.log(snapshot.val());
								snapshot.forEach(function(data) {
									console.log(data.key());
									cardsRef.child(data.key()).update({
										"pay": "true"
									});
								});
							});
							*/
						} else {
							console.log("User is logged out");
						}						
					}
					
				},false);
			});
			var _p = _dmap.p; //全部的省
			var _c = _dmap.c; //全部的市
			var _a = _dmap.a; //全部省市区
			$(function() {
				$.each(_p, function(index, value) {
					$('#province').append('<option value=' + value + '>' + value + '</option>');
					$('#city').hide();
					$('#area').hide();
				});
				$('#province').change(function() {
					var str = $('#province option:selected').val();
					var _c_a = _c[str];
					$('#city').empty();
					$('#area').empty();
					$('#city').show();
					if (undefined != _c_a && _c_a.length > 0) {
						$.each(_c_a, function(index, value) {
							$('#city').append('<option value=' + value + '>' + value + '</option>');
						});
						deployArea();
					}else{
						$('#city').hide();
						$('#area').hide();						
					}
					if((str=='香港特别行政区')||(str=='澳门特别行政区')||(str=='台湾省')){
						console.log('1');
						$('#needPay').val('1');
					}else if(str=='0'){
						$('#needPay').val('');
					}else{
						$('#needPay').val('0.8');
					}
				});
				$('#city').change(function() {
					$('#area').show();
					deployArea();
				});
			});

			function deployArea() {
				var str_province = $('#province option:selected').val();
				var str_city = $('#city option:selected').val();
				var str = str_province + "-" + str_city;
				var _a_all = _a[str]; //一个数组
				$('#area').empty();
				if (undefined != _a_all && _a_all.length > 0) {
					$.each(_a_all, function(index, value) {
						$('#area').append('<option value=' + value + '>' + value + '</option>');
					});
				} else {
					$('#area').hide();
				}
			}
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">邮寄明信片</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<p>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请在下方填写明信片收件人信息，并完成邮资支付后投入邮筒，无须亲自手动贴邮票啦！
				</p>
				<h5>姓名</h5>
				<div class="mui-input-row">
					<input id="recName" type="search" class="mui-input-speech mui-input-clear" placeholder="打字累了？试试语音输入---->">
				</div>
				<h5>邮编</h5>
				<div class="mui-input-row mui-search">
					<input id="recPostcode" type="search" class="mui-input-clear" placeholder="">
				</div>
				<h5>地址选择</h5>
				<div class="mui-input-row">
					<select id="province" class="province mui-h5">
						<option value="0">--请选择--</option>
					</select>
					<select id="city" class="city mui-h5"></select>
					<select id="area" class="area mui-h5"></select>
				</div>
				<h5>应付邮资</h5>
				<div class="mui-input-row ">
					<input id="needPay" type="search" class="mui-input-clear" placeholder="" disabled="">
				</div>
				<h5>安全码</h5>
				<div class="mui-input-row ">
					<input id="safecode" type="search" class="mui-input-clear" placeholder="请刮开明信片上任意两格将数字填入">
				</div>				
				<div class="mui-button-row">
					<a id="topay" href="javascript:void(0);" class="mui-btn mui-btn-primary mui-btn-block ">立即支付</a>
				</div>

			</div>
		</div>
	</body>

</html>